<template>
  <a-list
    item-layout="horizontal"
    :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"
    :data-source="props.pictureList"
  >
    <template #renderItem="{ item }">
      <a-card hoverable>
        <template #cover>
          <img alt="example" :src="item.url" style="width: 100%" />
        </template>
        <a-card-meta :title="item.title" />
      </a-card>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { withDefaults, defineProps } from "vue";
//需要从父组件-传给子组件 接受这个list
interface Props {
  pictureList: any[];
}

// 定一个来接受传过来的
const props = withDefaults(defineProps<Props>(), {
  //   默认值是空值
  pictureList: () => [],
});
</script>

<style scoped></style>
